<template>
	<div class="table-panel">
		<el-row>
			<el-form :inline="true" :model="formData" class="demo-form-inline">
				<el-form-item label="商品名称">
					<el-input v-model="formData.user" placeholder="商品名称"></el-input>
				</el-form-item>
				<el-form-item label="活动区域">
					<el-select v-model="formData.region" placeholder="商品分类">
						<el-option label="商品分类一" value="fenlei1"></el-option>
						<el-option label="商品分类二" value="fenlei2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">查询</el-button>
					<el-button type="button" @click="reset">重置</el-button>
				</el-form-item>
			</el-form>
		</el-row>

		<el-row>
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column type="expand">
					<template slot-scope="props">
						<el-form label-position="left" inline class="demo-table-expand">
							<el-form-item label="商品名称">
								<span>{{ props.row.name }}</span>
							</el-form-item>
							<el-form-item label="所属店铺">
								<span>{{ props.row.shop }}</span>
							</el-form-item>
							<el-form-item label="商品 ID">
								<span>{{ props.row.id }}</span>
							</el-form-item>
							<el-form-item label="店铺 ID">
								<span>{{ props.row.shopId }}</span>
							</el-form-item>
							<el-form-item label="商品分类">
								<span>{{ props.row.category }}</span>
							</el-form-item>
							<el-form-item label="店铺地址">
								<span>{{ props.row.address }}</span>
							</el-form-item>
							<el-form-item label="商品描述">
								<span>{{ props.row.desc }}</span>
							</el-form-item>
						</el-form>
					</template>
				</el-table-column>
				<el-table-column label="商品 ID" prop="id"></el-table-column>
				<el-table-column label="商品名称" prop="name"></el-table-column>
				<el-table-column label="描述" prop="desc"></el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageData.pageNo" :page-sizes="[10, 20, 50, 100]" :page-size="pageData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageData.total"></el-pagination>
		</el-row>
	</div>
</template>

<script>
	export default {
		name: 'table',
		data() {
			return {
				pageData: {
					pageNo: 1,
					pageSize: 10,
					total: 300
				},
				formData: {},
				tableData: [{
					id: '12987122',
					name: '好滋好味鸡蛋仔',
					category: '江浙小吃、小吃零食',
					desc: '荷兰优质淡奶，奶香浓而不腻',
					address: '上海市普陀区真北路',
					shop: '王小虎夫妻店',
					shopId: '10333'
				}, {
					id: '12987123',
					name: '好滋好味鸡蛋仔',
					category: '江浙小吃、小吃零食',
					desc: '荷兰优质淡奶，奶香浓而不腻',
					address: '上海市普陀区真北路',
					shop: '王小虎夫妻店',
					shopId: '10333'
				}, {
					id: '12987125',
					name: '好滋好味鸡蛋仔',
					category: '江浙小吃、小吃零食',
					desc: '荷兰优质淡奶，奶香浓而不腻',
					address: '上海市普陀区真北路',
					shop: '王小虎夫妻店',
					shopId: '10333'
				}, {
					id: '12987126',
					name: '好滋好味鸡蛋仔',
					category: '江浙小吃、小吃零食',
					desc: '荷兰优质淡奶，奶香浓而不腻',
					address: '上海市普陀区真北路',
					shop: '王小虎夫妻店',
					shopId: '10333'
				}]
			}
		},
		methods: {
			onSubmit() {

			},
			reset() {

			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			}
		}
	}
</script>

<style lang="less">
	.table-panel {
		.el-pagination {
			text-align: right;
			margin-top: 20px;
			li {
				font-weight: normal;
			}
		}
		padding: 30px;
		box-sizing: border-box;
		.demo-table-expand {
			font-size: 0;
		}
		.demo-table-expand label {
			width: 90px;
			color: #99a9bf;
		}
		.demo-table-expand .el-form-item {
			margin-right: 0;
			margin-bottom: 0;
			width: 50%;
		}
		.el-table__body-wrapper {
			overflow: inherit;
		}
	}
</style>